export default {

  initPlugin: function(params) {
    let initParams = {
      el: params.el,
      height: params.height || 30,
      maxScale: params.maxScale || 200,
      startValue: params.startValue || 0,
      region: params.region || false,
      background: params.background || false,
      color: params.color || false,
      markColor: params.markColor || "#FFCC33",
      isConstant: params.isConstant || false
    };

    if (!initParams.el) {
      console.warn("没有容器元素的参数");
      return false;
    }

    let rulerWrap = document.getElementById(initParams.el);
    rulerWrap.style.height = initParams.height < 30 ? 30 + "px" : initParams.height + "px";
    //最大刻度的小值是50
    initParams.maxScale = initParams.maxScale < 50 ? 50 : initParams.maxScale;

    if (initParams.startValue > initParams.maxScale) {
      initParams.startValue = initParams.maxScale;
    }
    let count = initParams.startValue; //初始值
    let winWidth = 800; //容器宽度
    let division = 5; //每个刻度的距离 分割线
    //刻度值数组
    let scaleValueList = [];
    for (let i = 0; i <= initParams.maxScale; i += 10) {
      scaleValueList.push(i);
    }

    let canvas = rulerWrap.getElementsByTagName("canvas")[0]; //获取容器下的canvas标签
    //没有canvas就创建一个
    if (!canvas) {
      canvas = document.createElement("canvas"); //创建canvas标签
      canvas.width = winWidth;
      canvas.height = initParams.height;
      rulerWrap.appendChild(canvas);
    }
    let cxt = canvas.getContext("2d");



    //画刻度尺
    function drawRuler(count) {
      count = count;

      //清空画布
      cxt.clearRect(0, 0, winWidth, initParams.height);

      //刻度尺背景
      if (initParams.background) {
        cxt.fillStyle = initParams.background;
        cxt.fillRect(0, 0, canvas.width, initParams.height);
      }

      //画刻度线
      for (let i = 0; i < initParams.maxScale; i++) {
        cxt.beginPath();
        cxt.save();
        cxt.strokeStyle = initParams.color ? initParams.color : "#bbb";
        cxt.lineWidth = 1;
        cxt.lineCap = "round";
        cxt.moveTo(division * i - count * division, 0);
        cxt.lineTo(division * i - count * division, Math.floor(initParams.height * 0.2));

        if (i % 2 === 0) {
          cxt.strokeStyle = initParams.color ? initParams.color : "#999";
          cxt.lineTo(division * i - count * division, Math.floor(initParams.height * 0.35));
        }
        if (i % 10 === 0) {
          cxt.strokeStyle = initParams.color ? initParams.color : "#666";
          cxt.lineTo(division * i - count * division, Math.floor(initParams.height * 0.52));
        }

        cxt.stroke();
        cxt.restore();
        cxt.closePath();
      }

      // 添加体重数字
      cxt.beginPath();
      cxt.font = "14px Arial";
      cxt.fillStyle = initParams.color ? initParams.color : "#333";
      cxt.textAlign = "center";
      cxt.textBaseline = "middle";
      scaleValueList.forEach(function(num, i) {
        cxt.fillText(num.toString(), (division * i * 10) - (count * division), Math.floor(initParams.height *
          0.78));
      });
      cxt.closePath();
    }

    drawRuler(count);
  },
  initFixed: function(params) {
    let initParams = {
      el: params.el,
      height: params.height || 30,
      maxScale: params.maxScale || 200,
      startValue: params.startValue || 0,
      region: params.region || false,
      background: params.background || false,
      color: params.color || false,
      markColor: params.markColor || "#FFCC33",
      isConstant: params.isConstant || false
    };

    if (!initParams.el) {
      console.warn("没有容器元素的参数");
      return false;
    }

    let rulerWrap = document.getElementById(initParams.el);
    rulerWrap.style.height = initParams.height < 30 ? 30 + "px" : initParams.height + "px";
    //最大刻度的小值是50
    initParams.maxScale = initParams.maxScale < 50 ? 50 : initParams.maxScale;

    if (initParams.startValue > initParams.maxScale) {
      initParams.startValue = initParams.maxScale;
    }
    let count = initParams.startValue; //初始值
    let winWidth = 832; //容器宽度
    let division = winWidth / 60; //每个刻度的距离 分割线
    //刻度值数组
    let scaleValueList = [];
    let center = parseInt(winWidth / division / 10) / 2

    for (let i = 0; i <= center; i++) {

      if (i == center) {
        // scaleValueList.splice(center,0,"N+0")
        // scaleValueList.splice(i,0,n1)
        scaleValueList.push("N+30")
        break
      }
      let key1 = (i - center) * 10
      let n1 = "N" + key1
      let key2 = i * 10
      let n2 = "N+" + key2
      scaleValueList.splice(i, 0, n1)
      scaleValueList.push(n2)
      // scaleValueList.push(i);
    }
    // console.log(scaleValueList);
    let canvas = rulerWrap.getElementsByTagName("canvas")[0]; //获取容器下的canvas标签
    //没有canvas就创建一个
    if (!canvas) {
      canvas = document.createElement("canvas"); //创建canvas标签
      canvas.width = winWidth;
      canvas.height = initParams.height;
      rulerWrap.appendChild(canvas);
    }
    let cxt = canvas.getContext("2d");



    //画刻度尺
    function drawRuler(count) {
      count = count;

      //清空画布
      cxt.clearRect(0, 0, winWidth, initParams.height);

      //刻度尺背景
      if (initParams.background) {
        cxt.fillStyle = initParams.background;
        cxt.fillRect(0, 0, canvas.width, initParams.height);
      }

      //画刻度线
      for (let i = 0; i < initParams.maxScale; i++) {
        cxt.beginPath();
        cxt.save();
        cxt.strokeStyle = initParams.color ? initParams.color : "#bbb";
        cxt.lineWidth = 1;
        cxt.lineCap = "round";
        cxt.moveTo(division * i - count * division, 0);
        cxt.lineTo(division * i - count * division, Math.floor(initParams.height * 0.2));

        if (i % 2 === 0) {
          cxt.strokeStyle = initParams.color ? initParams.color : "#999";
          cxt.lineTo(division * i - count * division, Math.floor(initParams.height * 0.35));
        }
        if (i % 10 === 0) {
          cxt.strokeStyle = initParams.color ? initParams.color : "#666";
          cxt.lineTo(division * i - count * division, Math.floor(initParams.height * 0.52));
        }

        cxt.stroke();
        cxt.restore();
        cxt.closePath();
      }

      // 添加体重数字
      cxt.beginPath();
      cxt.font = "14px Arial";
      cxt.fillStyle = initParams.color ? initParams.color : "#333";
      cxt.textAlign = "center";
      cxt.textBaseline = "middle";
      scaleValueList.forEach(function(num, i) {

        cxt.fillText(num, (division * i * 10) - (count * division), Math.floor(initParams.height *
          0.78));
      });
      cxt.closePath();
    }

    drawRuler(count);
  }
};
